<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        fieldset{
            width: 500px;
            margin: 150px auto;
            border: 0px;
            padding: 30px;
        }
    </style>
</head>
<body>
<div id="app">
    <fieldset>
        <legend>用户注册</legend>
        <el-form :model="info" status-icon :rules="rules" ref="info" label-width="100px" class="demo-ruleForm">
            <el-form-item label="手机号" prop="telephone">
                <el-input  v-model="info.telephone" ></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
                <el-input  v-model="info.code" >
                    <el-button slot="append" @click="sendCode()" id="foo">发送验证码</el-button>
                </el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
                <el-input  v-model="info.name"></el-input>
            </el-form-item>
            <el-form-item label="账号" prop="username">
                <el-input  v-model="info.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input  v-model="info.password" type="success" ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="register()">提交</el-button>
                <el-button @click="resetForm('info')">重置</el-button>
            </el-form-item>
        </el-form>
    </fieldset>
</div>

<script>
    var haha =new Vue({
        el:"#app",
        data:{
            info:{},
            rules: {
                username: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ]

            }
        },
        methods:{

            sendCode(){
                foo.disabled="disabled";
                var i=59;
                var t=setInterval(function () {
                    foo.innerHTML="正在发送("+i+"s)";
                    i--;
                    if(i==0){
                        foo.innerHTML="发送验证码";
                        foo.disabled="";
                        clearInterval(t);
                    }
                },1000);

                $.get("/demo/user/sendCode?telephone="+haha.info.telephone,function (backData) {

                })
            },

            register(){
                $.post("/demo/user/register",haha.info,function (backData) {
                    if(backData.code==0){
                       alert(
                           haha.info=backData.msg
                       )
                    }else if(backData.code==1){
                        haha.$message.success(backData.msg);
                        window.location.href="/demo/userr/userLogin.html"
                    }
                })
            },
            resetForm(formName) {
                haha.$refs[formName].resetFields();
            }
        }
    });

</script>
</body>
</html>